<!--新增功能，上半部分表单-->
<template>
  <dir class="UploadPdf-box">
    <div>
      <!-- 图片 删除 重新上传  v-if="imagesurlstr"  -->
      <div v-if="imagesurlstr" class="dialog-upload">
        <div class="pdfleft">
          <i class="iconfont iconpdf" />
          <p>{{ fileName }}</p>
        </div>
        <div class="pdfright">
          <div>
            <el-button size="mini" type="text text-primary" @click.stop="previewpdf">
              预览
            </el-button>
            <el-upload
              action="string"
              :show-file-list="false"
              accept="application/pdf"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeUpload"
              :http-request="toRequest"
              fit="scale-down"
            >
              <el-button size="mini" type="text text-primary">
                重新上传
              </el-button>
            </el-upload>
          </div>
        </div>
      </div>
      <!-- 上传 -->
      <div v-else>
        <el-upload
          class="dialog-upload"
          action="string"
          :show-file-list="false"
          accept="application/pdf"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeUpload"
          :http-request="toRequest"
          fit="scale-down"
        >
          <div v-if="imagesurlstr" v-viewer :src="[imagesurlstr]">
            <el-image style="width: 20px; height: 100px;" fit="cover" :src="imagesurlstr" />
          </div>
          <div v-else class="tip-box">
            <div class="tip-uplader">
              <i class="el-icon-plus avatar-uploader-icon" />
            </div>
            <!-- <p class="tip-font">（支持pdf格式，4M以内）</p> -->
          </div>
        </el-upload>
      </div>
    </div>
  </dir>
</template>

<script>
import { fileUpload } from '../../const/api.js';
import { fitType } from '../../const/common.js';
import { without } from 'lodash';
import { setImmediate } from 'timers';
// 文件上传限制 ------- 图片类型
const imageLimit = 'application/pdf';
export default {
  name: 'PictureUpload',
  props: {
    // 接收默认url
    imgsrc: {
      type: String,
      default: () => ''
    },
    // 接收多张
    imgsrcarr: {
      type: Array,
      default: () => []
    },
    // 跟单独调用没有关系，该值为了配合表单组件使用
    keystr: {
      type: String,
      default: () => ''
    },
    // 类型
    uptype: {
      type: String,
      default: () => ''
    },
    // PDF
    pdftitle: {
      type: String,
      default: () => ''
    }
  },

  data() {
    return {
      fileName: '',
      // 类型
      type: this.uptype || '',
      // 该值为了配合表单组件使用
      key: this.keystr || '',
      // 图片填充行为
      fitType,
      // 上传的地址
      uploadUrl: fileUpload,
      // 多张上传的图片地址
      imagesurlarr: this.imgsrcarr || [],
      // 单张
      imagesurlstr: this.imgsrc || ''
    };
  },

  watch: {
    imgsrc: {
      immediate: true,
      handler(val) {
        this.imagesurlstr = val;
      }
    },
    pdftitle: {
      immediate: true,
      handler(val) {
        this.fileName = val;
      }
    }
  },

  methods: {
    //   预览
    previewpdf() {
      this.$pdfViewer({ url: this.imagesurlstr, title: '注册证' });
    },
    // 上传图片成功 本地图片地址
    handleAvatarSuccess(res, file) {
      this.localImgurl = URL.createObjectURL(file.raw);
    },

    // 点击上传
    beforeUpload(file) {
      // 图片拦截
      const isJPG = file.type.includes(imageLimit);
      if (!isJPG) {
        this.$message.error('上传文件只能是PDF格式!');
        return false;
      }
      const isLt20M = file.size / 1024 / 1024 < 20;
      if (!isLt20M) {
        this.$message.error('上传文件大小不能超过 20MB!');
        return false;
      }
      this.fileName = file.name;
      // return this.fileName = file.name
    },
    toRequest(data) {
      // 发起请求
      let fd = new FormData();
      fd.append('file', data.file);
      this.$axios({
        method: 'post',
        url: fileUpload,
        headers: { 'Content-Type': 'multipart/form-data' },
        data: fd
      }).then(res => {
        this.$message({ type: 'success', message: '上传成功' });
        // 赋值上传后的地址给文档
        if (this.type === '1') {
          this.imagesurlarr.push(res.data.payload);
          this.$emit('ReturnImgUrl', this.imagesurl, this.key);
          this.$emit('ReturnImgName', data.file.name.split('.')[0], this.imagesurl, this.key);
        } else {
          this.imagesurlstr = res.data.payload;
          this.$emit('ReturnImgUrl', this.imagesurlstr, this.key, this.fileName);
          this.$emit('ReturnImgName', data.file.name.split('.')[0], this.imagesurlstr, this.key);
        }
      });
    }
  }
};
</script>

<style lang="less">
.UploadPdf-box {
  padding: 0;

  .imglistbox {
    // background: pink;
    // display: inline-block;
    float: left;

    .el-image {
      margin-right: 10px;
      cursor: pointer;
    }
  }

  .dialog-upload {
    width: 100px;
    height: 100px;
    // float: left;
    display: flex !important;
    flex-direction: column;
    // justify-content: center;
    // align-items: center;
    // padding-top: 50px;

    .pdfleft {
      padding: 20px;
      height: 100px;
      i {
        color: #ccc;
        font-size: 25px;
      }

      p {
        width: 90px;
        // height: 5px;
        margin-left: -20px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        // background: pink;
      }
    }

    .pdfright {
      // background: pink;
      // display: flex;
      // align-items: flex-end;
      padding-top: 20px;

      div {
        // position: absolute;
        // top: -20px;
        // left: -90px;
        display: flex;
        // flex-direction: column;
        justify-content: space-between;
        // align-items: flex-end;
      }
    }

    .el-image {
      max-width: 240px;
      height: 128px;
    }

    .tip-box {
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .tip-uplader {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 1px solid #cdd2dc;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .el-input {
    width: 211px;
  }
}
</style>
